<template>
	<view class="main animated fadeIn faster">
		<TitleBarVue :title="title"/>
		<view class="JoinInList">
			<view class="item" v-if="user.length!=0"  v-for="(item,index) in user " :key="index">
				<view class="info" @click="touser(item)">
					<view class="icon">
						<image v-bind:src="item.avatar" class="img-bg-img" mode="aspectFill"></image>
						<view class="sex">
							<image v-if="item.gender==2" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203404.png"></image>
							<image v-if="item.gender==1" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%94%B7.png"></image>
						</view>
					</view>
					<view class="detailed">
						<view class="name">{{item.nickname}}</view>
						<view class="desc">{{item.ipProvince?'item.ipProvince':''}}24岁 · 年薪10-20W</view>
					</view>
				</view>
				<view class="btn" @click="CancelBlackout(item.fromUid,item.toUid, index)">取消拉黑</view>
			</view>
			<view v-else style="width: 100%; margin-top: 24rpx;"  >
			<text class="position-relative d-flex font-bold font30" style="  justify-content: center;align-items: center;  top: 405rpx;">您暂时还没有拉黑用户</text>
			<image class="position-relative" style="top: -73rpx;left: 58rpx;width: 80%;" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/xiaoda.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import TitleBarVue from '../../components/TitleBar.vue';
	import { userApi } from '../../http/userApi';
	import store from '@/store/index.js';
	export default {
		data() {
			return {
				title: '黑名单',
				param:{
					type: 6,
					pageIndex:1,
					pageSize:9
				},
				isLastPage: false,
				user:[]//传过来的用户
			}
		},
		components:{TitleBarVue},
		onShow() {
			this.user = []
			this.Relation();
		},
		methods: {
			async Relation(){
				let res = await userApi.getRelation(this.param);
				if (res.length < this.param.pageSize) {
				    this.isLastPage = true;
				  }
				const start = this.user.length;
				this.user=[]
				this.user.splice(start, 0, ...res.records);
				console.log(this.user);
			},
			// 取消拉黑
			async CancelBlackout(fromUid, toUid, index) {
				let params = {
					bindFlag: 0,
					fromUid: fromUid,
					toUid: toUid,
					type: 6
				}
				uni.showLoading({
					mask: 'true',
					title: '取消拉黑...'
				})
				let res = await userApi.relation(params);
				this.user.splice(index, 1)
				uni.hideLoading()
				uni.showToast({
					icon: 'none',
					title: '取消拉黑成功!',
					position: 'bottom',
					duration: 1500
				})
			},
			touser(i){
				console.log(i);
				let uid=i.fromUid;
				if(uid==this.$store.state.user.uid){
					return
				}
				uni.navigateTo({
				    url: `/pagesMain/HomePage/HomePage?id=${uid}`
				});
			}
		},
		onReachBottom() {
			if(!this.isLastPage) {
				this.param.pageIndex++
				this.Relation();
			}
		}
	}
</script>

<style scoped lang="scss">
.main {
	background: #fff;
	overflow: hidden;
	.content {
		width: 100%;
		background-color: #fff !important;
	}
	.JoinInList {
		width: 730rpx;
		margin: 200rpx auto 0;
		border-radius: 50rpx;
		background-color: #fff;
		overflow: hidden;
		padding-bottom: 10rpx;
		.item {
			width: 700rpx;
			height: 150rpx;
			margin: 30rpx auto;
			background-color: #f5f5f5;
			border-radius: 15rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.info {
				display: flex;
				margin-left: 20rpx;
				.icon {
					position: relative;
					margin-right: 10rpx;
					image {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
					}
					.sex {
						position: absolute;
						bottom: 7rpx;
						right: 0rpx;
						
						image {
							width: 30rpx;
							height: 30rpx;
						}
					}
				}
				.detailed {
					display: flex;
					flex-direction: column;
					justify-content: center;
					.name {
						margin: 10rpx 0 4rpx;
						color: #231815;
						font-weight: 700;
						font-size: 30rpx;
					}
					.desc {
						color: #595757;
						font-size: 22rpx;
					}
				}
			}
			.btn {
				width: 150rpx;
				height: 60rpx;
				border-radius: 30rpx;
				color: #fff;
				margin-right: 50rpx;
				background: linear-gradient( 90deg, #ED65CE 0%, #E966CF 2%, #859BF0 69%, #5DB0FE 99%);
				display: flex;
				justify-content: center;
				align-items: center;
				image {
					width: 21.23rpx;
					height: 20.16rpx;
				}
			}
		}
	}
}
.pt-300 {
	padding-top: 300rpx;
}
</style>
